<template>
  <Modal
    v-model="show"
    :ref="ref"
    title="投料"
    :transfer="true"
    v-bind="config"
    :width="config.width > 0 ? config.width : width"
  >
    <div class="content">
      <Tabs name="record" v-model="tabName" type="card" @on-click="changeTabs">
        <TabPane tab="record" label="已绑定" name="已绑定" context-menu>
          <feedTable :data="data.feedTableBindData"></feedTable>
        </TabPane>
        <TabPane tab="record" label="未绑定" name="未绑定" context-menu>
          <feedTable :data="data.feedTableData"></feedTable>
        </TabPane>
      </Tabs>
    </div>
    <div slot="footer">
      <!-- <Button type="default" @click="cancel">取消</Button> -->
      <Button type="primary" :loading="loading" @click="ok">确定</Button>
    </div>
  </Modal>
</template>

<script>
// import feedTable from "./feedTable.vue";
const ref = "feedModal";
export default {
  name: ref,
  // components: { feedTable },
  inject: ["anc"],
  data() {
    return {
      ref,
      show: false,
      width: 600,
      tabName: "未绑定",
      loading: false,
    };
  },
  props: {
    config: {
      default: () => {
        return {
          title: "",
          width: 0,
          height: 400,
          draggable: false,
          mask: true,
          closable: true,
          okText: "确定",
          cancelText: "取消",
          widthRatio: 0.7,
        };
      },
    },
    data: {
      default: () => {
        return {};
      },
    },
    attrs: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.$set(this.anc.vms, this.ref, this);
      const obs = new ResizeObserver((entries) => {
        this.width = entries[0].contentRect.width * this.config.widthRatio;
      });
      obs.observe(this.$el);
    });
  },
  methods: {
    ok() {
      // this.anc.vms.ltform.validate();
      this.anc.feedModalOk();
    },
    cancel() {
      this.show = false;
    },
    changeTabs(name) {
      this.tabName = name;
      this.anc.feedUpdateData();
    },
  },
};
</script>
<style scoped lang="scss">
$top: 40px;
.content {
  position: relative;
  width: 100%;
  min-height: 70vh;
}
</style>
